<template>
  <view class="container">
    <view class="header">
      <view class="header-item">{{ state.select_name }}</view>
    </view>
    <view class="question">
      <MySwiperPrivate :list="questionList"></MySwiperPrivate>
    </view>
  </view>
</template>

<script setup lang="ts">
import { ref, reactive } from 'vue'
import type { QuestionItem } from '@/types/home'
import {
  getExerciseQuestionWithNodetAPI,
  getExerciseQuestionWithExaminationPaperAPI,
  getAllFavoriteQuestionMyselfNoPageAPI,
} from '@/services/home'

import MySwiper from './components/MySwiper.vue'
import { onLoad, onShow } from '@dcloudio/uni-app'
import MySwiperPrivate from './components/MySwiperPrivate.vue'

// 存放响应式变量
const state = reactive({
  current_question: 1,
  total_question: 1,
  select_id: 1,
  select_name: '',
  select_has_done: 1,
  type: 'knowledgepoint',
})
const info = [{ content: 'AAAAA' }, { content: 'Bbbbb' }]
// 当前知识点下的题目列表
const questionList = ref<QuestionItem[]>([])
// 获取当前选中知识点下的题目列表，筛选已做题目类型
const getExerciseQuestionDataWithNodeData = async () => {
  let params = {
    knowledgepoint: state.select_id,
    has_done: state.select_has_done,
  }
  console.log('要发送请求节点下的试题：', params)
  let res = await getExerciseQuestionWithNodetAPI(params)
  console.log('知识点的题目列表：', res)
  if (res.code == 200) {
    questionList.value = res.data.results
    console.log('获取节点题目成功questionList：', questionList.value)
  } else {
    uni.showToast({ icon: 'error', title: '获取知识点下的练习题目失败' })
  }
}
// 获取当前选中试卷下的题目列表，筛选已做题目类型
const getExerciseQuestionDataWithPaper = async () => {
  let params = {
    paper: state.select_id,
    has_done: state.select_has_done,
  }
  let res = await getExerciseQuestionWithExaminationPaperAPI(params)
  console.log('试卷的题目列表：', res)
  if (res.code == 200) {
    questionList.value = res.data.results
    console.log('获取练习题目成功questionList：', questionList.value)
  } else {
    uni.showToast({ icon: 'error', title: '获取试卷练习题目失败' })
  }
}
//获取收藏的题目
const getFavoriteQuestionData = async () => {
  let res = await getAllFavoriteQuestionMyselfNoPageAPI()
  console.log('错题列表：', res)
  if (res.code == 200) {
    questionList.value = res.data.results.map((item) => item.question_info)
    console.log('获取练习题目成功questionList：', questionList.value)
  } else {
    uni.showToast({ icon: 'error', title: '获取试卷练习题目失败' })
  }
}
//获取做错的题目
const getWrongQuestionData = async () => {
  let res = await getAllFavoriteQuestionMyselfNoPageAPI()
  console.log('错题列表：', res)
  if (res.code == 200) {
    questionList.value = res.data.results.map((item) => item.question_info)
    console.log('获取练习题目成功questionList：', questionList.value)
  } else {
    uni.showToast({ icon: 'error', title: '获取试卷练习题目失败' })
  }
}
// 页面加载
onLoad((opts: any) => {
  // console.log('页面加载参数', opts)
  state.type = opts.type
  console.log('上个页面参数：', opts)
  if (opts.type === 'paper' || opts.type === 'knowledgepoint') {
    // state.has_doen默认为1取已做题目，2是不要已做题目
    if (parseInt(opts.has_done) === 2) {
      state.select_has_done = 2
    }
    state.select_name = opts.name
    state.select_id = parseInt(opts.id)
  }
  if (opts.type === 'knowledgepoint') {
    getExerciseQuestionDataWithNodeData()
    // eslint-disable-next-line no-dupe-else-if
  } else if (opts.type === 'paper') {
    getExerciseQuestionDataWithPaper()
  } else if (opts.type === 'reDoFavoriteQuestion') {
    console.log('上个页面发来收藏重做请求')
    getFavoriteQuestionData()
  } else if (opts.type === 'reDoWronQuestion') {
    console.log('上个页面发来收藏重做请求')
    getWrongQuestionData()
  } else {
    uni.showToast({ icon: 'error', title: '请返回重试！' })
  }
})
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  flex-flow: column wrap;
  justify-content: center;
  align-items: center;
}

.question {
  display: flex;
  flex-flow: column wrap;
  align-items: center;
  justify-content: center;
  border: 1rpx solid;
}

.header {
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  align-items: center;
}

.heaer-item {
  font-size: 30rpx;
  color: green;
}

.content_front {
  color: black;
}

.swiper-dot,
.swiper {
  width: 100vw;
  height: 318.75rpx;
}

.question_content {
  height: 400rpx;
  width: 100vw;
}
</style>
